<template>
  <div class="rank-warp">
    <div class="rank-card">
      <div class="rank-menu-list">
        <div>
          <p class="rank-item-title">巅峰榜</p>
          <div
            class="rank-item-content"
            v-for="(rank, index) in rankList"
            :key="rank.id"
            @click="getRankSong(rank.id, index)"
            :class="{ 'rank-item-active': rankCurrentIndex === index }"
          >
            {{ rank.topTitle }}
          </div>
        </div>
        <!-- <div>
        <p class="rank-item-title">巅峰榜</p>
        <div class="rank-item-content">巅峰榜</div>
        <div class="rank-item-content">新歌榜</div>
        <div class="rank-item-content">流行指数榜</div>
        <div class="rank-item-content">电音</div>
        <div class="rank-item-content">音乐人</div>
      </div> -->
      </div>
      <div class="rank-song-list">
        <div class="rank-song-top">
          <p class="rank-song-top-tit">热歌榜</p>
          <p class="rank-song-top-time">2022-10-13</p>
          <p class="rank-song-top-rule">榜单规则</p>
        </div>
        <div class="rank-song-btnmeun">
          <el-button :icon="CaretRight" size="large" type="bofang"
            >播放全部</el-button
          >
          <el-button :icon="CirclePlus" size="large">添加到</el-button>
          <el-button :icon="Download" size="large">下载</el-button>
          <el-button :icon="Edit" size="large">批量操作</el-button>
          <!-- <a href="#rank-comment" @click="goComment">
          </a> -->
          <el-button :icon="ChatDotSquare" size="large" @click="goComment"
            >评论</el-button
          >
        </div>
        <el-table
          :data="rankSongList"
          style="width: 100%"
          stripe
          class="rank-show-list-table"
        >
          <el-table-column type="index" width="112" align="center" />
          <el-table-column prop="name" label="歌曲">
            <template v-slot="{ row }">
              <div class="rank-song-list-show">
                <img :src="row.cover" alt="" width="70" height="70" />
                <span>{{ row.title }}</span>
                <svg
                  t="1665723141307"
                  class="icon-bofang"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2524"
                  width="36"
                  height="36"
                  @click="playMusic(row)"
                >
                  <path
                    d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                    p-id="2525"
                    fill="#dbdbdb"
                  ></path>
                  <path
                    d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                    p-id="2526"
                    fill="#bfbfbf"
                    data-spm-anchor-id="a313x.7781069.0.i1"
                    class="selected"
                  ></path>
                </svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="singerName" label="歌手" width="180" />
          <el-table-column prop="address" label="时长" width="95" />
        </el-table>
        <div class="login-comment">
          <p>查看更多内容，请下载客户端</p>
          <a href="javascript:;"> <button>立即下载</button> </a>
        </div>

        <div class="rank-comment" ref="rankComment" id="rank-comment">
          <div class="rank-send-comment">
            <div>
              <p>
                评论 <span>共{{ commentsList.length }}条评论</span>
              </p>
            </div>
            <div class="rank-send-comment-think">
              <textarea cols="30" rows="10"></textarea>
              <p>剩余300字</p>
            </div>
            <div class="rank-send-comment-btn">
              <a href="javascript:;">
                <button>发表评论</button>
              </a>
            </div>
          </div>
        </div>
        <div class="rank-comment-list">
          <p>全部评论</p>
          <div
            class="rank-comment-item"
            v-for="comments in commentsList"
            :key="comments.id"
          >
            <div class="rank-comment-item-avator">
              <img :src="comments.avatarurl" />
            </div>
            <div class="rank-comment-item-content">
              <p>{{ comments.nick }}</p>
              <p>2018</p>
              <p>{{ comments.rootcommentcontent }}</p>
              <p>点赞</p>
              <p>查看16条回复</p>
              <div class="rank-comment-item-other">
                <p><a>忘了吧：</a><span>啦啦啦啦啦</span></p>
                <p><a>忘了吧：</a><span>啦啦啦啦啦</span></p>
                <p><a>忘了吧：</a><span>啦啦啦啦啦</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, ref } from "vue";
import { getTopListsApi, getRanksApi, getCommentsApi } from "@/api/rank";
import {
  CaretRight,
  CirclePlus,
  Edit,
  Download,
  ChatDotSquare,
} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
export default {
  name: "Rank",
};
</script>

<script lang="ts" setup>
const router = useRouter();
const route = useRoute();
// #region 获取榜单信息开始******************************
const rankList = ref<any>([]);
const rankListLength = ref(0);
const commentsList = ref<any>([]);
onMounted(async () => {
  // console.log(123);
  const res = await getTopListsApi();
  // console.log(res);
  rankList.value = res.data.topList;
  rankListLength.value = rankList.value.length;
  const res1 = await getRanksApi(rankList.value[0].id);
  const res2 = await getCommentsApi(rankList.value[0].id);
  commentsList.value = res2.comment.commentlist;
  rankSongList.value = res1.req_1.data.data.song.splice(0, 20);
});
// 加载获取默认歌曲

// 获取榜单详情信息
const rankCurrentIndex = ref(0);
const rankSongList = ref([]);
const getRankSong = async (rankId: number, index: number) => {
  rankCurrentIndex.value = index;
  const res = await getRanksApi(rankId);
  const res2 = await getCommentsApi(rankId);
  console.log(res2, "comment");

  commentsList.value = res2.comment.commentlist || [];
  rankSongList.value = res.req_1.data.data.song.splice(0, 20);
};

// 处理时间
const formatTime = (time: number) => {
  // dayjs解析毫秒数
  const songTime = dayjs(time).format("mm:ss");
};

// #endregion 获取榜单信息开始******************************

// #region 获取榜单歌曲信息开始******************************
const bodyWidth = ref(0);
onMounted(async () => {
  bodyWidth.value = document.body.clientWidth;
  // 获取视口宽度

  window.onresize = () => {
    return (() => {
      bodyWidth.value = document.body.clientWidth;
    })();
  };
});
// #endregion 获取榜单歌曲信息结束******************************

// 点击播放歌曲
const playMusic = (row: any) => {
  console.log(row, "rorw");

  console.log(row.songId, "mid");

  // let routeUrl = router.resolve({
  //   name: "TplayMusic",
  //   params: { songId: row.songId, aa: 123 },
  // });
  let routeUrl = router.resolve({
    name: "TplayMusic",
    query: {
      songId: row.songId,
    },
    // params: { songId: row.songId },
  });
  window.open(routeUrl.href, "_blank");
};

//跳转到评论区
const rankComment = ref();
const goComment = (e: any) => {
  rankComment.value.scrollIntoView({ behavior: "smooth" });
};

// const goComment = (e: any) => {
//   const comment = document.querySelector("#rank-comment");
//   console.log((comment as Element).scrollIntoView);

//   (comment as Element).scrollIntoView({ behavior: "smooth" });
// };
</script>

<style scoped>
.rank-warp {
  width: v-bind(bodyWidth + "px");
  background-image: linear-gradient(to bottom, #f3f3f3 0%, #ffffff 10%, #fff);
  position: absolute;
  left: 0;
}
.rank-card {
  margin: 50px auto;
  display: flex;
  width: 1200px;
}
.rank-menu-list {
  width: 200px;
  border: 1px solid #e4e4e4;
  height: v-bind(rankListLength * 54+61 +"px");
}
.rank-song-list {
  scroll-behavior: smooth;
  padding-left: 30px;
  width: 990px;
}

.rank-item-title {
  line-height: 60px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px solid #ebebeb;
  margin: 0 17px 10px;
}
.rank-item-content {
  font-size: 15px;
  display: flex;
  line-height: 22px;
  padding: 8px 10px;
  width: 178px;
  height: 38px;
  align-items: center;
}
.rank-item-active {
  background-color: #2caf6f;
  color: #fff !important;
}
.rank-item-content:hover {
  color: #31c37c;
  cursor: pointer;
}
.rank-song-top {
  display: flex;
  margin: 20px 0;
}
.rank-song-top-tit {
  font-weight: 400;
  font-size: 24px;
  margin-right: 15px;
}
.rank-song-top-time {
  /* font-weight: 400; */
  font-size: 12px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  margin-top: 5px;
  color: #333;
}
.rank-song-top-rule {
  font-weight: 400;
  font-size: 20px;
  margin-right: 15px;
}
.rank-song-btnmeun {
  margin: 20px 0;
}
.rank-song-btnmeun a {
  text-decoration: none;
  margin-left: 20px;
}

.el-table__header {
  background-color: #c9c9c9 !important;
}
.el-button--bofang {
  color: white;
  background-color: #31c37c;
}
:deep(.el-button) {
  --el-button-hover-text-color: #000;
  --el-button-hover-bg-color: #ededed;
  --el-button-hover-border-color: #c9c9c9;
  --el-button-active-border-color: #c9c9c9;
}

/* .rank-song-btnmeun :deep(.el-button) {
  padding: 0 30px;
  background-color: #fafafa;
}

.rank-song-btnmeun :deep(.el-button:hover) {
  background-color: #31c27c;
  color: #ffffff;
} */
.rank-song-list-show {
  position: relative;
  display: flex;
  align-items: center;
}
.rank-song-list-show span {
  font-size: 16px;
  margin-left: 20px;
}
.icon-bofang {
  display: none;
}
.rank-song-list-show:hover .icon-bofang {
  display: block;
  position: absolute;
  right: 0px;
  color: #ebebeb;
  cursor: pointer;
}

.rank-show-list-table {
  /* background-color: #31c27c; */
  margin-bottom: 50px;
}
.login-comment {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.login-comment p {
  font-size: 18px;
  color: #000;
}
.login-comment button {
  margin-top: 20px;
  display: block;
  width: 175px;
  height: 41px;
  line-height: 41px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 41px;
  background-color: #31c27c;
  border-style: none;
  cursor: pointer;
}
.login-comment a {
  text-decoration: none;
}

.rank-comment {
  height: 200px;
  width: 100%;
}
.rank-send-comment {
  width: 100%;
}
.rank-send-comment p:first-child {
  font-size: 24px;
  font-weight: 400;
  line-height: 58px;
}
.rank-send-comment p span {
  font-size: 14px;
  margin-left: 12px;
  color: #999;
}

.rank-send-comment-think {
  position: relative;
  overflow: hidden;
  min-height: 102px;
  border: 1px solid #ececec;
  background-color: #f5f5f5;
  padding: 10px;
}
.rank-send-comment-think textarea {
  border-style: none;
  background-color: #f5f5f5;
  width: 100%;
  height: 100px;
  resize: none;
}

.rank-send-comment-think textarea:focus {
  border: none;
  outline: none;
}
.rank-send-comment-think p {
  text-align: right;
  font-size: 14px;
  line-height: 1.5;
}

.rank-send-comment-btn {
  text-align: right;
  margin-top: 20px;
}
.rank-send-comment-btn button {
  background-color: #2caf6f;
  border-color: #2caf6f;
  color: #fff;
  border: none;
  width: 80px;
  line-height: 27px;
  height: 27px;
  text-align: center;
  padding: 0;
  cursor: pointer;
}

.rank-comment-list > p {
  margin: 20px 0;
  font-weight: 400;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-comment-item {
  border-top: 1px solid #f2f2f2;
  display: flex;
  margin-top: 20px;
}
.rank-comment-item-avator {
  width: 50px;
  text-align: center;
  margin-top: 10px;
}
.rank-comment-item-avator img {
  width: 40px;
  border-radius: 50%;
}
.rank-comment-item-content {
  margin-left: 10px;
  flex: 1;
}
.rank-comment-item-content > p {
  /* margin-bottom: 10px; */
  height: 20px;
  line-height: 20px;
  color: #999;
}
.rank-comment-item-other {
  width: 100%;
  /* width: 500px; */
  background-color: #f2f2f2;
  padding: 10px 20px;
}
.rank-comment-item-other p {
  margin: 5px 0;
  font-size: 14px;
}
.rank-comment-item-other a {
  text-decoration: none;
  color: #31c27c;
  cursor: pointer;
}
/* ele-ui样式 */
:deep(.--el-button-hover-text-color) {
  background-color: #2caf6f;
}
</style>
